<template>
	<view>
		<view v-if="(CashData.isShowDistributionButton||isShowBtn)">
			<view class="m-endorsementBox">
				<view class="m-endorsementBox-bg">
				</view>
				<view class="m-userinfo">
					<view class="m-photo">
						<image lazy-load :src="(UserInfo.user_avatar)"></image>
					</view>
					<view class="m-text">
						<label>{{sprintf(__('我是%s'), UserInfo.user_nickname)}}</label>
						<text>{{sprintf(__('我为%s代言'), StoreName)}}</text>
					</view>
				</view>
			</view>
			<view class="u-toptip" v-if="(ProductInfo!=null)">
				<view class="u-loadmore u-loadmore-line">
					<text class="u-loadmore-tips">{{__('为您推荐')}}</text>
				</view>
			</view>
			<view class="m-product-list" v-if="(ProductInfo!=null)">
				<navigator open-type="redirect" :url="(ProductUrl) + '?pid=' + (ProductInfo.pid) + '&uid=' + (UserBase.user_id)" class="m-product-item">
					<view class="m-product-img">
						<image lazy-load :src="(ProductInfo.ppic)" mode="aspectFill" />
					</view>
					<view class="m-product-info">
						<view class="m-product-name">
							<label>{{ProductInfo.pname}}</label>
						</view>
						<view class="m-product-price">
							<label>{{__('￥')}}</label>{{ProductInfo.pprice}}
							<button class="u-btn u-btn-default">{{buyname}}</button>
						</view>
					</view>
				</navigator>
			</view>
			<image lazy-load v-if="(ProductInfo==null)" :src="(invite_info.qrcode)" class="QRCodeBOx" mode="widthFix"></image>

			<view class="m-text-box" v-if="(RuleEnabled&&flag==false)">
				<view @click="showTip">
					<label class="iconfont icon-14052218"></label>{{__('推广规则')}}
				</view>
				<view>
					<view>
						{{sprintf(__('当你的粉丝在店铺内支付订单后，订单中的所有商品，都有相应的收益比例：一级粉丝 %s%% ，二级粉丝 %s%% 。将支付订单金额和收益比例相乘后，累计计算出你此单的总收益。* 注： - 不计算收益的内容：运费、优惠券、关税，以及收益比例为0的商品；'), Level1Discount, Level2Discount)}}
						{{__(' - 如果发生了退货退款，需要按照实际退货数量对收益进行相应的扣除；- 按照国家法律规定，当你的月累计收入达到相关税金起征点后，商家会为你代缴税款，你的收益将是税后收入；')}}
					</view>
				</view>
			</view>
			<view class="m-text-box" v-else>
				<view @click="showTip">
					<label class="iconfont icon-14052218"></label>{{__('推广规则')}}
				</view>
				<view>
					<view>{{__('成功邀请一位好友，可获积分奖励')}}</view>
					<view>{{__('当好友产生消费时，再获得返利奖励')}}</view>
				</view>
			</view>

			<view class="m-text-box1" v-if="(RuleEnabled&&flag)">
				<rich-text :nodes="htmlString"></rich-text>
			</view>
			<navigator v-if="(ProductInfo==null && isShowBtn && CashData.isShowDistributionButton)" class="u-btn u-btn-default" @click="share">{{__('我也要代言')}}</navigator>
			<navigator class="u-btn u-btn-default" @click="share" v-if="(ProductInfo!=null &&isShowBtn)">{{__('我也要推广')}}</navigator>

			<button v-if="(ProductInfo==null && isShowBtn==false && CashData.isShowDistributionButton)" class="u-btn u-btn-default" @click="onShareBox">{{__('分享赚钱')}}</button>

			<view class="u-tap-btn">
				<navigator url="/pages/index/index" open-type="switchTab" class="u-go-home">
					<view class="iconfont icon-shouyeshouye"></view>
				</navigator>
			</view>

			<view class="m-msk" v-if="(isShowMag)" @click="closeMsk">
				<image lazy-load mode="widthFix" :src="(imgUrl) + 'share_tips.png'"></image>
			</view>
		</view>
		<navigator url="/pages/index/index" open-type="switchTab" class="m-nullpage" v-if="(CashData.isShowDistributionButton==false&&isShowBtn==false)">
			<view class="m-nullpage-middle">
				<view class="m-null-tip">
					<text>{{__('对不起，您现在还没有分销权限')}}</text>
					<text>{{__('多多购物有助于获取权限哦。')}}</text>
				</view>
			</view>
		</navigator>

		<share-box-mp :PageQRCodeInfo="PageQRCodeInfo" @cancelShare="cancelShare" @showCodeImg="showCodeImg" @shareQRCode="shareQRCode" @saveImg="saveImg"></share-box-mp>
		<share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>

	</view>
</template>

<script>
	import shareBoxMp from '../../components/share-box-mp.vue'
	import shareBoxApp from '../../components/share-box-app.vue'

	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				options: {},
				invite_info: {},
				UserInfo: {},
				isShowBtn: false,
				ProductInfo: null,
				isShowMag: false,
				Level1Discount: 0,
				Level2Discount: 0,
				imgUrl: "",
				ProductUrl: "",
				StoreName: "",
				StoreLogo: "",
				buyname: "",
				PromotionRule: "",
				htmlString: "",
				RuleEnabled: true,
				flag: true,
				CashData: {},
				shareData: {}
			};
		},

		components: {
			shareBoxMp,
			shareBoxApp
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('粉丝排行榜')
			});


			var that = this;
			this.getPlantformInfo(function(site) {
				that.setData({
					StoreName: site.name,
					StoreLogo: site.logo,
				});
			});


			this.setData({
				options: options
			})

			that.$.isNull(options.type) ? this.setData({
				ProductUrl: "/pagesub/product/detail",
				buyname: "去购买"
			}) : this.setData({
				ProductUrl: "/pagesub/product/detail",
				buyname: "去预约"
			});

			/*
			that.$.getCache("isShowMag", function(e) {},
				function() {
					that.$.setCache("isShowMag", "true", function() {
						that.setData({
							isShowMag: true
						})
					})
				});
                */

			if (that.$.isNull(this.userInfo)) {
				this.forceUserInfo(function(user) {
					if (user) {
						that.setData({
							isShowBtn: that.$.isNull(options.uid) ? false : true
						});
						that.showButton();
						that.getPageInfo(that.$.isNull(options.uid) ? that.userInfo.user_id : options.uid)
					}
				});

			} else {
				this.setData({
					isShowBtn: that.$.isNull(options.uid) ? false : true
				});
				this.showButton();
				this.getPageInfo(that.$.isNull(options.uid) ? this.userInfo.user_id : options.uid);

				if (that.$.isNull(options.pid)) {
					that.$.setNavigationBarTitle({
						title: "我要代言"
					});
				} else {
					that.$.setNavigationBarTitle({
						title: "我要推广"
					});

					this.setData({
						ProductInfo: options
					})

					this.getPlantformInfo(function(site) {
						that.setData({
							flag: true,
							RuleEnabled: site.promotion
						});

						that.htmlString = site.promotion.replace(/\\/g, "").replace(/<img/g,
							"<img style=\"display:none;\"");
					});
				}
			}
		},

		onBackPress() {
			if (this.$refs.shareBoxApp.showBoxView) {
				this.$refs.shareBoxApp.cancel();
				return true;
			}
		},
		onUnload() {
			if (this.$refs.shareBoxApp.showBoxView) {
				this.$refs.shareBoxApp.cancel()
			}
		},
		onNavigationBarButtonTap(e) {
			var that = this;

			if (e.index === 0) {
				that.onShareBox();
				/*
				that.setData({
				    shareBoxFlag: 1,
				    shareContetnFlag: 1
				})
				*/
			} else {
				uni.showToast({
					title: "你点了收藏按钮",
					icon: "none"
				})
			}
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

			showButton: function() {
				var that = this,
					paremt = {
						user_id: this.userInfo.user_id
					};
				that.setData({
					CashData: {
						isShowDistributionButton: true
					}
				});
			},
			onShareAppMessage: function() {
				let that = this;
				this.setData({
					isShowMag: false
				});
				var e, t, n;
				return that.$.isNull(this.ProductInfo) ? (e = "/member/fans/endorsement?uid=" + this.UserInfo.Id, t = this.UserInfo.user_nickname +
					"偷偷的告诉你，粉丝也能赚钱哦~") : (e = "/member/fans/endorsement?pid=" + this.ProductInfo.pid + "&pname=" + this.ProductInfo.pname +
					"&pprice=" + this.ProductInfo.pprice + "&ppic=" + this.ProductInfo.ppic + "&uid=" + this.UserInfo.Id + "&type=" +
					this.ProductInfo.type, t = "我发现这个商品很好，非常适合你哦！"), {
					title: t,
					desc: t,
					path: e
				}
			},
			share: function() {
				this.getPageInfo(this.userInfo.user_id);
				this.setData({
					isShowBtn: false
				})
			},
			getPageInfo: function(e) {
				var that = this,
					params = {
						user_id: e,
						path: "pages/index/index?uid=" + e,
						width: 430
					};
				that.setData({
					Level1Discount: this.shopInfo.Level1Discount,
					Level2Discount: this.shopInfo.Level2Discount,
					imgUrl: this.shopInfo.ShopConfig.AppIconPath
				});

				//生成二维码并返回地址。 - 需要修改调整为小程序地址
				that.$.request({
					url: this.Config.URL.fx.invite,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status) {
							that.setData({
								invite_info: data.invite_info
							});
						} else {
							that.setData({
								flag: false,
								ispage: false
							})
						}
					}
				});

				that.$.request({
					url: this.Config.URL.user.overview,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status) {
							that.setData({
								UserInfo: data.member_info,
								UserBase: data.base
							});
						}
					}
				});
			},
			closeMsk: function() {
				this.setData({
					isShowMag: false
				})
			},
			onShareBox: function(e) {
				let that = this;
				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				// #ifdef APP-PLUS
				var $href = that.$.sprintf('%s/tmpl/index.html?FX=%d', this.Config.WapSiteUrl, this.userInfo
					.user_id);
				$href = that.$.sprintf('%s/h5/pages/index/index?uid=%d', that.Config.SiteUrl, this.userInfo.user_id);
				// #endif
				// #ifdef MP-WEIXIN
				var $href = "/pages/index/index?uid=" + this.userInfo.user_id;
				// #endif


				var path, title, image;


				if (that.$.isNull(this.ProductInfo)) {
					path = "/member/fans/endorsement?uid=" + this.userInfo.user_id;
					title = this.userInfo.user_nickname + "偷偷的告诉你，粉丝也能赚钱哦~";
					image = this.StoreLogo;
				} else {
					path = "/member/fans/endorsement?pid=" + this.ProductInfo.pid + "&pname=" + this.ProductInfo.pname +
						"&pprice=" + this.ProductInfo.pprice + "&ppic=" + this.ProductInfo.ppic + "&uid=" + this.userInfo.user_id + "&type=" +
						this.ProductInfo.type;

					title = "我发现这个商品很好，非常适合你哦！"
					image = this.ProductInfo.ppic;
				}

				this.setData({
					shareData: {
						shareTitle: title,
						shareText: title,
						href: $href,
						image: image
					}
				});

				this.$refs.shareBoxApp.show()
			}
		}
	}
</script>

<style lang="scss">
	@import "../../styles/_variables";

	page {
		background-color: #fff;
	}

	.u-loadmore {
		margin: 60rpx auto 0 auto;
	}

	.u-loadmore-tips {
		background-color: #fff !important;
	}

	.m-endorsementBox {
		width: 100%;
		overflow: hidden;
		height: 240rpx;
		position: relative;
		text-align: center;
	}

	.m-endorsementBox-bg {
		height: 940rpx;
		width: 940rpx;
		background-color: #1e1c1d;
		-webkit-border-radius: 940rpx / 320rpx;
		border-radius: 940rpx / 320rpx;
		margin: 0 auto;
		margin-top: -700rpx;
		margin-left: -100rpx;
		position: relative;
	}

	.m-userinfo-bg {
		bottom: 20rpx;
		width: 400rpx;
	}

	.m-userinfo {
		z-index: 2;
		position: relative;
		display: inline-block;
		position: relative;
		top: -180rpx;
	}

	.m-userinfo .m-photo {
		width: 124rpx;
		height: 124rpx;
		float: left;
	}

	.m-photo image {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.m-text {
		float: left;
		text-align: left;
		line-height: 40rpx;
		margin-top: 22rpx;
		margin-left: 20rpx;
	}

	.m-text {
		font-size: 24rpx;
		color: #eebe8c;
	}

	.m-text label {
		font-size: 32rpx;
		font-weight: bold;
	}

	.m-text text {
		display: block;
	}

	.m-product-info::before {
		content: "";
		border: none;
	}

	.u-btn {
		margin-top: 80rpx;
	}

	.u-tip-text {
		display: block;
		font-size: 28rpx;
		text-align: center;
		color: $default-skin-bg
	}

	.m-product-price .u-btn {
		margin: 0;
		float: right;
		width: 160rpx;
		height: 60rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		margin-top: -30rpx;
	}

	.QRCodeBOx {
		width: 300rpx;
		display: block;
		margin: 20rpx auto;
	}

	.u-tap-btn {
		position: fixed;
		right: 20rpx;
		bottom: 150rpx;
	}

	.u-go-home {
		border-radius: 100%;
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #eee;
		font-size: 20rpx;
		text-align: center;
		background-color: #fff;
		box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
		z-index: 2;
		opacity: 0.8;
		line-height: 80rpx;
		margin-bottom: 20rpx;
	}

	.u-go-home .iconfont {
		font-size: 40rpx;
	}

	.m-text-box {
		font-size: 24rpx;
		box-sizing: border-box;
		padding: 20rpx;
		color: #888;
		line-height: 40rpx;
	}

	.m-text-box label {
		padding-right: 10rpx;
	}

	.m-text-box1 {
		box-sizing: border-box;
		padding: 20rpx 36rpx;
		color: #888;
		line-height: 40rpx;
	}

	.m-text-box1 label {
		padding-right: 10rpx;
		font-size: 24rpx
	}

	.m-msk {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		z-index: 10;
	}

	.m-msk image {
		position: fixed;
		right: 30rpx;
		top: 0;
		width: 300rpx;
	}
</style>